<template>
  <n-spin :show="option.show">
  <n-form
      ref="formRef"
  >
    <n-form-item :show-feedback="false">
      <n-input v-model:value="login.account" placeholder="输入姓名">
        <template #prefix>
          <i class="fa fa-user-o" />
        </template>
      </n-input>
    </n-form-item>
    <n-form-item :show-feedback="false">
      <n-input type="password" v-model:value="login.password" placeholder="输入年龄" showPasswordOn="click">
        <template #prefix>
          <i class="fa fa-key" />
        </template>
      </n-input>
    </n-form-item>
    <n-form-item :show-feedback="false">
      <n-checkbox v-model:checked="login.remember">
        记住密码?
      </n-checkbox>
      <span class="tipsText" style="font-size: 10px">
        记住密码需要打开本站Cookies权限
      </span>
    </n-form-item>
    <n-form-item :show-feedback="false">
      <n-button attr-type="button" type="info" ghost block @click="loginClick">
        登录
      </n-button>
    </n-form-item>
    <n-form-item :show-feedback="false"  style="display: flex;justify-content: flex-end">
      <n-button type="info" text @click="$router.push('/register')">
        注册账号?
      </n-button>
    </n-form-item>
  </n-form>
  </n-spin>
</template>

<script>

import {useMessage} from "naive-ui";

export default {
  name: "LoginUserTemplate",
  data(){
    return{
      login:{
        account:'',
        password:'',
        remember:true
      },
      option:{
        memoryPassword:true,
        show:true
      },
      message:useMessage()
    }
  },
  methods:{
    loginClick:function (){
      this.axios.post('/user/login',this.login).then((res)=>{
        console.log(res);
        const data=res.data;
        let msg;
        if (data.code>0){
          msg=data.error;
        }else {
          msg="登录成功";
        }
        if (this.$utils.tipsOption(data.code, data.status, msg)) {
          return;
        }
        localStorage.setItem("role",data.data.role);
        localStorage.setItem("token",data.data.token);
        this.$router.push("/index")
      })
    }
  },
  mounted() {
    setTimeout( ()=>{
      this.option.show=false;
      console.log(this.option.show)
    },500);
  }
}
</script>

<style scoped>

</style>